 <template>
	<view>
		
		<!--主体-->
		<view class="meMain">
			<view class="imageback"></view>
			<view class="mePosition">
				<view class="meMainBox">
					
					<!--头部-->
					
					<view class="meHead">
						<view class="meHeadAvatar"><image :src="avatar_url" mode="aspectFill"></image></view>
						<view class="meHeadName"><text>{{ human_name }}</text></view>
					</view>
					
					<!-- repository status -->
					<view class="meOverBg uni-bold">
						<!-- <view class="meVisitorTitle">项目</view> -->
						<view class="meVisitor">
							<view class="meOrderLt"  @click="gotoStars">
								<view class="meOrderTxt_01">{{stargazers_count}}</view>
								<view class="meOrderTxt_02">STARS</view>
							</view>
							<view class="meOrderLt"  @click="gotoWachers">
								<view class="meOrderTxt_01">{{watchers_count}}</view>
								<view class="meOrderTxt_02">WATCHERS</view>
							</view>
							<view class="meOrderLt"  @click="gotoForks">
								<view class="meOrderTxt_01">{{forks_count}}</view>
								<view class="meOrderTxt_02">FORKS</view>
							</view>
							
						</view>
					</view>
					
					
					<view class="meOverBg uni-bold" v-if="updated_at">
						<view class="description">最近更新 >> <text>{{timeToString(updated_at)}}</text></view>
					</view>
					
					<view class="meOverBg uni-bold" v-if="forked" @click="gotoParent">
						<view class="description">FORK FROM <text style="margin-left: 10rpx;color: #50B7EA;">{{parent.full_name}}</text></view>
					</view>
					<!-- description -->
					<view class="meOverBg" v-if="description">
						<view class="description"><text>{{description}}</text></view>
					</view>
					
					<view class="meOverBg uni-bold">
						<!-- <view class="meVisitorTitle">项目</view> -->
						<view class="meVisitor">
							<view class="meOrderLt" @click="starRepo" style="width: 50%;">
								<view class="meOrderTxt_01">
									<image :src="starred ? '../../static/star_in_active.png' : '../../static/star_in.png'" mode=""></image>
								</view>
								<view class="meOrderTxt_02" :style="{color: starred ? '#50b7ea' : ''}">{{starred ? 'STARRED' : 'STAR'}}</view>
							</view>
							<view class="meOrderLt" @click="watchRepo" style="width: 50%;">
								<view class="meOrderTxt_01"><image :src="watched ? '../../static/eye_in_active.png' : '../../static/eye_in.png'" mode=""></image></view>
								<view class="meOrderTxt_02" :style="{color: watched ? '#50b7ea' : ''}" >{{watched ? 'WATCHED' : 'WATCH'}}</view>
							</view>
												
						</view>
					</view>
					
					<view class="meOverBg uni-bold">
						<view class="businessList" @click="gotoCodes()">
							<view class="businessListTxt"><image src="../../static/code_active.png"></image>代码</view>
							<view class="businessListYou">{{language}}<image src="../../static/you.png"></image></view>
						</view>
						
						<view class="businessList" @click="gotoIssues()">
							<view class="businessListTxt"><image src="../../static/issues_active.png"></image>问题</view>
							<view class="businessListYou">Issues<image src="../../static/you.png"></image></view>
						</view>
						
						<view class="businessList" @click="gotoPR()">
							<view class="businessListTxt"><image src="../../static/branch_active.png"></image>PR</view>
							<view class="businessListYou">Pull Requests<image src="../../static/you.png"></image></view>
						</view>						
						
						<view class="businessList" @click="gotoCommits()">
							<view class="businessListTxt"><image src="../../static/commits_active.png"></image>提交</view>
							<view class="businessListYou">Commits<image src="../../static/you.png"></image></view>
						</view>
			
						<view class="businessList" @click="gotoComments()">
							<view class="businessListTxt"><image src="../../static/comment_active.png"></image>评论</view>
							<view class="businessListYou">Comments<image src="../../static/you.png"></image></view>
						</view>
						<!-- <view class="businessList">
							<view class="businessListTxt"><image src="../../static/release_active.png"></image>发布</view>
							<view class="businessListYou">Releases<image src="../../static/you.png"></image></view>
						</view> -->
						<view class="businessList" @click="gotoLicense">
							<view class="businessListTxt"><image src="../../static/license_active.png"></image>开源协议</view>
							<view class="businessListYou">{{license ? license : '暂无'}}<image src="../../static/you.png"></image></view>
						</view>
						<view class="businessList" @click="gotoReadme">
							<view class="businessListTxt"><image src="../../static/readme_active.png"></image>说明</view>
							<view class="businessListYou">README<image src="../../static/you.png"></image></view>
						</view>
						
					</view>
					
				</view>
			</view>
		</view>
		<!--主体-->
		
	</view>
</template>

<script>
	import {myinfo } from '../../utils/api/user.js'
	import {getOne, putStar, deleteStar, putWatch, deleteWatch, forkOne} from '../../utils/api/repo.js'
	
	export default{
		data(){
			return{
				avatarUrl:'../../static/avatar.png',//头像
				
				avatar_url : '../../static/avatar.png',
				
				name : '',
				id : '',
				
				human_name : '',				
				forks_count : 0,
				watchers_count : 0,
				stargazers_count : 0,
				description : '',
				updated_at : '',
				
				starred : false,
				forked : false,
				watched : false,
				language: '',
				license : '',
				
				parent : ''
				
				
			}
		},
		onLoad(e) {
			this.name = e.name ? e.name : 'hisi'
			this.repo = e.repo ? e.repo : 'hisiphp'
			this.id = e.id ? e.id : '7579431'
			
			uni.setNavigationBarTitle({
				title: this.repo
			})
			uni.showLoading({
				
			})
			
			this.getData()	
		},
		onShow() {			
			this.token = uni.getStorageSync('token');			
		},
		methods:{
			gotoLicense() { 
				if(!this.license){
					uni.showToast({
						icon:"none",
						title: '暂无开源协议'
					});
				}else{
					uni.navigateTo({
						url : './licence?name='+this.license
					})
				}
			},
			gotoReadme() {
				uni.navigateTo({
					url : './readme?name='+this.name + "&repo=" + this.repo
				})
			},
			gotoParent(){
				uni.navigateTo({
					url : "./repo?name="+this.parent.owner.login + "&repo=" + this.parent.name
					
				})
			},
			timeToString(utc){
				if(!utc){
					return '00'
				}
				if(!isNaN(utc)){
					return utc >= 10 ? utc : '0' + utc
				}
				let d = new Date(utc);
				let datetime=d.getFullYear() 
				+ '-' 
				+ this.timeToString(d.getMonth() + 1)
				+ '-' 
				+ this.timeToString(d.getDate())
				+ ' ' 
				+ this.timeToString(d.getHours())
				+ ':' 
				+ this.timeToString(d.getMinutes())
				+ ':' 
				+ this.timeToString(d.getSeconds());
				return datetime
			},
			gotoStars(){
				uni.navigateTo({url :'./stars_list?name='+this.name+'&repo='+this.repo})
			},
			gotoWachers(){				
				uni.navigateTo({url :'./watcheres_list?name='+this.name+'&repo='+this.repo})
			},
			gotoForks(){
				let name = this.name
				let repo = this.repo
				if(this.parent){
					name = this.parent.owner.login
					repo = this.parent.path
				}
				uni.navigateTo({url :'./forks_list?name='+name+'&repo='+repo})
			},
			
			// 跳转评论
			gotoComments(){
				
			},
			
			// 跳转提交列表
			gotoCommits(){
				
			},
			
			// 跳转问题列表
			gotoIssues(){
				
			},
			
			// 跳转pr列表
			
			// 查看代码
			gotoCodes(){
				
			},
			
			// pr 列表
			gotoPR(){
				
			},
		
			// 获取数据
			getData(){
				getOne(this.name,this.repo,this.id).then(res => {
					uni.hideLoading()
					this.watchers_count = res.data.watches_count
					this.forks_count = res.data.forks_count
					this.stargazers_count = res.data.stars_count
					this.avatar_url = res.data.owner.new_portrait
					this.human_name = res.data.name
					this.description = res.data.description
					this.forked = res.data.fork
					this.watched = res.data.watched
					this.starred = res.data.stared
					this.parent = res.data.parent
					this.language = res.data.language
					this.license = res.data.license
					this.updated_at = res.data.last_push_at
					uni.setNavigationBarTitle({
						title: this.human_name
					})
				}).catch(res=>{uni.hideLoading()})
			},
			starRepo(){
				if(!this.starred){
					uni.showLoading({
						
					})
					putStar(this.name,this.repo).then(res=>{
						uni.hideLoading()
						
					}).catch(res => {
						uni.hideLoading()
						if(res.statusCode == 204){
							uni.showToast({
								title : "star 成功"
							})
							this.starred = true
						}else{
							uni.showToast({
								icon:"none",
								title:"star失败 , 请稍后再试"
							})
							this.starred = false
						}
					})
				}else{
					uni.showModal({
						title: "提示",
						content: "确认取消star吗?",
						success : (res) => {
							if(res.cancel){
								return
							}
							uni.showLoading({
								
							})
							deleteStar(this.name,this.repo).then(res => {
								uni.hideLoading()
								
							}).catch(res=>{
								uni.hideLoading()
								if (res.statusCode == 204){
									uni.showToast({
										title:'取消star成功'
									})
									this.starred = false
								}else{
									uni.showToast({
										icon: "none",
										title : '取消star失败 , 请稍后再试'
									})
								}
							})
						}
					})
				}
			},
			watchRepo(){
				if(this.watched){
					uni.showModal({
						title: "提示",
						content: "确认取消watch吗?",
						success : (res) => {
							if(res.cancel){
								return
							}
							deleteWatch(this.name,this.repo).then(res => {
								uni.hideLoading()
							}).catch(res => {
								uni.hideLoading()
								if(res.statusCode == 204){
									uni.showToast({
										title : '取消watch成功'
									})
									this.watched = false
								}else{
									uni.showToast({
										icon:"none",
										title : "取消watch失败 , 请稍后再试"
									})
								}
							})
						}
					})
				}else{
					uni.showLoading({})
					putWatch(this.name,this.repo).then(res => {
						uni.hideLoading()
					}).catch(res => {
						uni.hideLoading()
						if(res.statusCode == 204){
							uni.showToast({
								title: "watch成功"
							})
							this.watched = true
						}else{
							uni.showToast({
								icon: "none",
								title : "watch失败 , 请稍后再试"
							})
						}
					})
				}
			},
			forkRepo(){
				if(this.forked) {
					uni.showToast({
						icon:"none",
						title : "该仓库是fork仓库 , 请返回至父级fork"
					})
					return
				}
				uni.showModal({
					title:"提示",
					content :"您确认要fork这个仓库吗?",
					success : (res) => {
						if(res.cancel){
							return
						}
						forkOne(this.name,this.repo).then(res => {
							uni.hideLoading()
						}).catch(res => {
							uni.hideLoading()
							if(res.statusCode == 201){
								uni.showToast({
									title: "fork成功"
								})
							}else{
								if(res.data && res.data.message){
									uni.showToast({
										icon:"none",
										title: res.data.message
									})
								}else{
									uni.showToast({
										icon: "none",
										title : "fork失败"
									})
								}
								
							}
						})
					}
				})
			}			
		}
	}
</script>

<style>
	page{ background: #f5f5f5; }
	.meMain{ width: 100%;position: relative; }
	.meMain .imageback{ width: 100%;height: 110upx;display: block; background-color: #f5f5f5;}
	.meMainBox{ width: 92%;margin: 0 auto; }
	.mePosition{ position: absolute;top: 0;left: 0;width: 100%; }
	.meHead{ overflow: hidden;position: relative; }
	.meHeadAvatar{ float: left;width: 14%; }
	.meHeadAvatar image{ width: 50rpx;height: 50rpx;display: block;border-radius: 50%; }
	.meHeadName{ float: left;width: 81%;font-size: 38rpx;font-weight: bold;line-height: 50rpx;color: black;foverflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
	.description {font-size: 32rpx;padding:20rpx 20rpx 20rpx 20rpx;}
	.meOverBg{ background: #FFFFFF;overflow: hidden;border-radius: 12upx;margin-top: 30upx; }
	.meVisitor{ display: flex;flex-direction: row; }
	.meVisitorLt{ width: 50%;text-align: center;margin: 30upx 0; }
	.meVisitorLt:nth-child(1){ border-left: 1px #F5F5F5 solid;border-right: 1px #F5F5F5 solid; }
	.meVisitorTxt_01{ font-size: 28upx;color: #666666; }
	.meVisitorTxt_01 image{ width: 35upx;height: 35upx;vertical-align: middle;margin: 0 10upx 4upx 0; }
	.meVisitorTxt_02{ font-size: 30upx;color: #3B7ED5; }
	
	.meVisitorTitle{ font-size: 30upx;color: #333333;border-bottom: 1px #F5F5F5 solid;padding: 20upx 30upx; }
	.meOrderLt{ width: 33.33%;text-align: center;padding: 30upx 0;transition: all 0.4s; }
	.meOrderLt:active{ background: #E2E2E2; }
	.meOrderTxt_01{ color : #50B7EA  }
	.meOrderTxt_01 image{ width: 40upx;height: 40upx;display: block;margin: 0 auto 6upx; }
	.meOrderTxt_02{ font-size: 24upx;color: #666666; }
	
	.businessList{ overflow: hidden;padding: 30upx;border-bottom: 1px #F5F5F5 solid;transition: all 0.4s; }
	.businessList:active{ background: #E2E2E2; }
	.businessList:last-child{ border-bottom: none; }
	.businessListTxt{ float: left;font-size: 28upx;color: #333333; }
	.businessListTxt image{ width: 35upx;height: 35upx;vertical-align: middle;margin: 0 10upx 4upx 0; }
	.businessListYou{ float: right;font-size: 28upx;color: #333333; }
	.businessListYou image{ width: 20upx;height: 20upx;vertical-align: middle;margin: 0 0 4upx 10upx; }
	
	
</style>
